<template>
  <div>
    <h1 style="margin-top: 10px">客户中心</h1>
    <el-container>
      <el-main>
        <div id="table">
          <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            :data="pageData"
            stripe
            border
            height="700"
            style="width: 100%;height: 100% ;">
            <el-table-column
              prop="cid"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
              prop="customerNo"
              label="客户编号"
              width="200">
            </el-table-column>
            <el-table-column
              prop="customerName"
              label="客户名称"
              width="340">
            </el-table-column>
            <el-table-column
              prop="linkPerson"
              label="联系人"
              width="100">
            </el-table-column>
            <el-table-column
              prop="linkPhone"
              label="联系方式"
              width="150">
            </el-table-column>
            <el-table-column
              prop="linkAddr"
              label="联系地址"
              width="320">
            </el-table-column>
            <el-table-column
              prop="areaName"
              label="所属区域"
              width="280">
            </el-table-column>
            <el-table-column
              prop="fax"
              label="传真">
            </el-table-column>
            <el-table-column>
              <label="操作">
              <template slot-scope="scope" v-if="status==='1'">
                <el-button type="text" size="small" @click="changeF( scope.row )">编辑</el-button>
                <el-button type="text" size="small" @click="del( scope.row )">删除</el-button>
                <!-- <el-button type="text" size="small">禁用</el-button>
                <el-button type="text" size="small">启用</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            background
            @current-change="pageChange"
            :current-page.sync="currentPage"
            :total='dataNum'>
          </el-pagination>
        </div>
      </el-main>
      <el-footer>
        <el-col :span="4" :offset="20"><el-button type="primary" @click="creatcus()">创建客户</el-button></el-col>
      </el-footer>
    </el-container>
    <el-dialog title="修改客户信息" :visible.sync="ifchange">
      <el-form :model="changeForm" ref="changeForm" :rules="rules">
        <el-form-item label="客户单位名称" prop="customerName">
          <el-input v-model="changeForm.customerName"  placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="linkPerson">
          <el-input v-model="changeForm.linkPerson"  placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="linkPhone">
          <el-input v-model="changeForm.linkPhone"  placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" prop="linkAddr">
          <el-input v-model="changeForm.linkAddr"  placeholder="请输入联系地址"></el-input>
        </el-form-item>
        <el-form-item label="发票信息" prop="invoiceInfo">
          <el-input v-model="changeForm.invoiceInfo"></el-input>
        </el-form-item>
        <el-form-item label="传真"  prop="fax">
          <el-input v-model="changeForm.fax"></el-input>
        </el-form-item>
        <el-form-item label="备注"  prop="remarks">
          <el-input v-model="changeForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ifchange = false">取 消</el-button>
        <el-button type="primary" @click="change">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
      name: "customers",
      inject:['reload'],
      data(){
        return {
          loading: true,
          status:'',
          data: [],
          pageData:[],
          status:'',
          dataNum:0,
          ifchange: false,
          currentPage:1,
          changeForm:{
            customerNo:'',
            customerName:'',
            linkPerson:'',
            linkPhone:'',
            linkAddr:'',
            fax:'',
            invoiceInfo:'',
            remarks:'',
          },

          rules: {
            customerName: [
              {required: true, message: '请输入客户名称', trigger: 'blur'},
            ],
            linkPerson: [
              {required: true, message: '请输入联系人', trigger: 'blur'},
            ],
            linkPhone: [
              {required: true, message: '请输入联系方式', trigger: 'blur'},
            ],
            linkAddr: [
              {required: true, message: '请输入联系地址', trigger: 'blur'},
            ]
          }
        }
      },
      beforeRouteEnter(to, form, next) {
        next()
        this.xuanran()
      },
      created(){
        this.status=localStorage.getItem("status")
        this.xuanran()
      },
      methods:{
        pageChange(val){
          this.loading=true;
          let pageNo=this.currentPage
          this.pageData=[]
          for(let i=(pageNo-1)*10;i<(pageNo*10>this.dataNum?this.dataNum:pageNo*10);i++){
            this.pageData.push(this.data[i])
          }
          setTimeout(()=>{
            this.loading=false
          },400);
        },
        xuanran(){
          this.$http.get("/hnhyscms_ws/customers/getAllCustomers",{emulateJSON:true}).then(
            success=>{
              this.data=success.data
            this.dataNum=success.data.length
            this.pageChange()
            }
          )
        },
        creatcus(){
          this.$router.push({
            path:"/createcustomer"
          })
        },
        del(item){
          this.$confirm('此操作将删除该客户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
              let params={
              customerNo:item.customerNo
              }
              this.$http.post("/hnhyscms_ws/customers/deleteCustomers",params,{emulateJSON:true}).then(
                success=>{
                    this.reload();
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                    });
                }
              )
          }).catch(() => {
              this.$message({
              type: 'info',
              message: '已取消删除'
              });          
          });
        },
        changeF(item){
          this.changeForm={
            customerNo:item.customerNo,
            customerName:item.customerName,
            linkPerson:item.linkPerson,
            linkPhone:item.linkPhone,
            linkAddr:item.linkAddr,
            fax:item.fax,
            invoiceInfo:item.invoiceInfo,
            remarks:item.remarks,
          }
          this.ifchange=true
        },
        change(){
          this.$refs['changeForm'].validate((valid) => {
            if (valid) {
              let params={
                ...this.changeForm,
              }
              this.$http.post("/hnhyscms_ws/customers/changeByCustomerNo",params,{emulateJSON:true}).then(
                success=>{
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  this.ifchange=false
                  this.reload();
                }
              )
            }
            })
        },
      }
    }
</script>

<style scoped>
  .title-word {
    font-size: 30px;
    line-height:50px;
  }
  .wrap{
    position: relative;
    height:100%;
    width: 1536px;
    background: #e6e7de;
    background-size: cover;
    margin-top: -70px;
    margin-left: -9px;
  }
</style>
